import Vue from 'vue'
import VueRouter from 'vue-router'
import Reg from '@/views/Reg/Reg.vue'
import Login from '@/views/Login/Login.vue'
import Main from '@/views/Main/Main.vue'
import Home from '@/views/Home/Home.vue'
import store from '../store'
import UserAvatar from '@/views/Menus/User/UserAvatar.vue'
import UserInfo from '@/views/Menus/User/UserInfo.vue'
import UserPwd from '@/views/Menus/User/UserPwd.vue'
import ArtCate from '@/views/Menus/Article/ArtCate.vue'
Vue.use(VueRouter)
// 注意：如果创建的组件，需要通过路由进行展示，则要放在views目录下，否咋放在compents目录下
const routes = [
  {
    path: '/',
    component: Main,
    redirect: '/home',
    // name: 'main',
    children: [
      { path: 'user-avatar', component: UserAvatar },
      { path: 'user-info', component: UserInfo },
      { path: '/home', component: Home },
      { path: 'user-pwd', component: UserPwd },
      { path: 'art-cate', component: ArtCate }
    ]
    // 嵌套的子路由规则
    // 子路由的path有两种写法
    // 完整写法 ==》父 + 子（这里的父是 /
    // 简化写法：==>子（父路由的path必须要被省略，而且子路由要省略/）
  },
  { path: '/reg', component: Reg, name: 'reg' },
  { path: '/login', component: Login, name: 'login' }
]

const router = new VueRouter({
  routes
})
// 声明全局前置守卫
// 在每次发生路由导航跳转的时候，都会触发fn回调
router.beforeEach((to, from, next) => {
  // 判断用户将要访问的路由地址，是否为有权限的地址
  // 如果不是，则直接放行（登录，注册页面）
  // 如果访问的页面地址，是有权限的地址（非登录，非注册）
  // 只需要看用户手里有没有token，有的话放行，没有的话，强制用户跳转到登录页面
  if (to.path === '/reg' || to.path === '/login') {
    // 不需要权限，直接放行
    next()
  } else {
    // 需要判断是否有token，再决定是否放行
    // store.state.模块的注册名称.模块下的数据
    const token = store.state.user.token
    if (token) {
      next()
    } else {
      next('/login')
    }
  }
})
export default router
